<template>
  <div class="split-pane-wrapper">
    <div class="pane pane-left" :style="{ width: leftOffsetPercent }">
      <button @click="handleClick">点击减少左侧宽度</button>
    </div>
    <div
      class="pane-trigger-con"
      :style="{ left: triggerLeft, width: triggerWidthPx }"
    ></div>
    <div class="pane pane-right" :style="{ left: leftOffsetPercent }">
      nbbbbbbbbbbbb
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SplitPane',
    data() {
      return {
        // 在这定义一个值。这样用户可以直接指定占比的值
        // 在页面css 布局使用的值 使用计算属性拼接即可
        leftOffset: 0.3,
        triggerWidth: 8,
      }
    },
    computed: {
      // 动态属性去拼接生成css 实际需要的代%形式的数据
      leftOffsetPercent() {
        return `${this.leftOffset * 100}%`
      },
      triggerWidthPx() {
        return `${this.triggerWidth}px`
      },
      triggerLeft() {
        return `calc(${this.leftOffset * 100}% - ${this.triggerWidth / 2}px)`
      },
    },
    methods: {
      handleClick() {
        this.leftOffset -= 0.02
      },
    },
  }
</script>
<style lang="less" scoped>
  .split-pane-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    .pane {
      position: absolute;
      height: 100%;
      top: 0;
      &-left {
        /*width: 30%;*/
        background: white;
      }
      &-right {
        right: 0;
        bottom: 0;
        /*left: 30%;*/
        background: red;
      }
      &-trigger-con {
        z-index: 100;
        height: 100%;
        background: red;
        position: absolute;
        top: 0;
      }
    }
  }
</style>
